<script setup>
import { ref, reactive, toRaw } from "vue";
import MaterialInput from "@/components/MaterialInput.vue";
import MaterialButton from "@/components/MaterialButton.vue";
import MaterialCheckbox from "@/components/MaterialCheckbox.vue";
import MaterialTextArea from "@/components/MaterialTextArea.vue";
import MaterialUpload from "@/components/MaterialUpload.vue";
import dayjs from "dayjs";
import { warrantySave, sendSimpleMail } from "@/api/tires";
import { customEmail } from "@/utils/index.js";

import { DatePicker, message, Input, Form, FormItem } from "ant-design-vue";
import textIcon from "@/assets/img/warranty/text-icon3.png";

let form = reactive({
    address: "",
    email: "",
    failureReason: "",
    fullDotNumber: "",
    fullDotPic: "",
    fullSidewallPic: "",
    fullTreadPic: "",
    name: "",
    odometerPic: "",
    phoneNumber: "",
    purchaseDate: "",
    purchasePlace: "",
    serialNumber: "",
    tireBrand: "",
    tireSize: "",
    tiresPic: "",
    treadDepth: "",
    orderId: "",
});
let isClear = ref(false);
let show = ref(true);
const propList = [
    {
        model: "name",
        text: "NAME",
    },
    {
        model: "email",
        text: "EMAIL",
    },
    {
        model: "phoneNumber",
        text: "PHONE",
        isNotRequired: true,
    },
    {
        model: "address",
        text: "ADDRESS",
        isNotRequired: true,
    },
    {
        model: "purchaseDate",
        text: "DATE OF PURCHASE",
    },
    {
        model: "purchasePlace",
        text: "PLACE OF PURCHASE",
    },
    {
        model: "orderId",
        text: "ORDER ID",
        placeholder: "The order number provided by the platform you purchased",
    },
    {
        model: "tireBrand",
        text: "TIRE BRAND",
        span: 6,
    },
    {
        model: "tireSize",
        text: "TIRE SIZE, LOAD INDEX, & SPEED RATING",
        placeholder: "Example: 215/65R15 95H",
        span: 6,
    },
    {
        model: "fullDotNumber",
        text: "FULL DOT NUMBER",
        placeholder: "Full DOT number with production week and year",
        span: 6,
    },
    {
        model: "serialNumber",
        text: "SERIAL NUMBER",
        placeholder: "Serial number (with the barcode) located on the inside sidewall near the rim",
        span: 6,
    },
    {
        model: "treadDepth",
        text: "CURRENT REMAINING TREAD DEPTH (32ND)",
        placeholder: "Example: 32nd",
    },
    {
        model: "failureReason",
        text: "FAILURE REASON",
        type: "textarea",
    },

    {
        model: "fullDotPic",
        text: "PICTURES OF THE FULL DOT",
        type: "img",
    },
    {
        model: "tiresPic",
        text: "CLEAR PICTURES OF THE ISSUE WITH THE TIRES",
        type: "img",
    },

    {
        model: "fullTreadPic",
        text: "CLEAR PICTURES OF THE FULL TREAD WIDTH OF THE TIRES",
        type: "img",
    },
    {
        model: "fullSidewallPic",
        text: "CLEAR PICTURES OF THE FULL SIDEWALL OF THE TIRES",
        type: "img",
    },
    {
        model: "odometerPic",
        text: "CLEAR PICTURE OF CURRENT ODOMETER READING",
        type: "img",
    },
];
const handleChange = (url, prop) => {
    form[prop] = url;
};

const formRef = ref(null);
const submit = () => {
    formRef.value
        .validate()
        .then(() => {
            let params = toRaw(form);
            params.purchaseDate = dayjs(params.purchaseDate).format("YYYY-MM-DD");

            warrantySave(params)
                .then((res) => {
                    if (res.code == 200) {
                        show.value = false;
                        message.success(`Submit successfully`);
                        const mailParams = {
                            content: customEmail(propList, params),
                            subject: "MASTERTRACK-MANUFACTURER'S WARRANTY",
                            toMail: "customerservice@unicorntire.com",
                        };
                        sendSimpleMail(mailParams).then((res) => {
                            show.value = false;
                            setTimeout(() => {
                                show.value = true;
                            }, 10);
                        });
                    } else {
                        message.error(`Submit failed.Please contact the administrator.`);
                    }
                })
                .catch(() => {
                    message.error(`Submit failed.Please contact the administrator.`);
                });
        })
        .catch(() => {
            // message.error(`Submit failed.Please contact the administrator.`);
        });

    return;
};
if (translate) {
    translate.listener.start();
    translate.execute();
}
</script>
<template>
    <div>
        <div class="container px-0" style="margin-top: -2rem">
            <img class="img-fluid" :src="textIcon" alt="" />
        </div>
        <div class="desc mb-3">
            <h4 class="text-red text-f-Montserrat-Bold uppercase">WE'RE HERE TO ASSIST YOU!</h4>
            <p class="text-f-Montserrat-Regular text-black">TO ENSURE WE CAN ADDRESS YOUR NEEDS PROMPTLY, PLEASE COMPLETE THE FORM BELOW. OUR WARRANTY AND CLAIMS TEAM WILL REVIEW YOUR SUBMISSION AS QUICKLY AS POSSIBLE. IF YOU'RE UNSURE ABOUT ANY OF THE DETAILS, JUST PROVIDE AS MUCH RELEVANT INFORMATION AS YOU CAN. FOR ANY FURTHER ASSISTANCE, PLEASE EMAIL US AT CUSTOMERSERVICE@UNICORNTIRE.COM.</p>
        </div>
        <Form ref="formRef" :model="form">
            <div class="row">
                <div v-for="(item, index) in propList" :key="index" :class="`col-lg-${item.span || 12}`">
                    <FormItem
                        :label="item.text"
                        :name="item.model"
                        :label-col="{ span: 24 }"
                        :wrapper-col="{ span: 24 }"
                        :rules="[
                            {
                                required: !item.isNotRequired,
                                message: `${item.text} IS REQUIRED!`,
                            },
                        ]"
                    >
                        <MaterialUpload v-if="item.type == 'img'" @handleFilesChange="(url) => handleChange(url, item.model)" />
                        <MaterialTextArea v-else-if="item.type == 'textarea'" v-model="form.failureReason" class="input-group-outline mb-4" :rows="6"></MaterialTextArea>
                        <Input v-else v-model:value="form[item.model]" :placeholder="item.placeholder"></Input>
                    </FormItem>
                </div>
            </div>
        </Form>
        <div class="col-lg-12 mb-1 mt-3">
            <MaterialButton class="fs-4 text-f-ERASBD bg-red" @click="submit" fullWidth>SUBMIT</MaterialButton>
        </div>
    </div>
</template>

<style scoped>
.desc {
    background: #efefef;
    border-radius: 1rem;
    padding: 1rem;
}
::v-deep(.ant-picker-focused) {
    border-color: #d2d6da !important;
    box-shadow: unset !important;
}
::v-deep(.ant-input) {
    padding: 9px 11px;
}
::v-deep(.ant-form-item) {
    margin-bottom: 16px;
}
::v-deep(.ant-form-item-label) {
    font-family: Montserrat-Bold;
}
</style>
